<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易搜索示例</title>
    <style>
        /* 新增导航栏样式 */
        .nav-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #fff;
            padding: 15px 30px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
        } 
 
        .nav-links {
            display: flex;
            gap: 25px;
        }

        .nav-links a {
            color: #333;
            text-decoration: none;
            font-size: 14px;
        }

        .nav-links a:hover {
            color: #3385ff;
        }

        /* 调整原有body样式 */
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 70px; /* 为导航栏留出空间 */
            background: #fff;
            margin: 0;
        }
        
        .parent {
		  display: flex;
		  justify-content: center; /* 水平居中 */
		  align-items: center; /* 垂直居中 */
		  height: 100vh; /* 使父元素足够高以查看效果 */
		}
		.child {
		  width: 200px;
		  height: 100px;
		  background-color: lightblue;
		}
        
        #preview {
            margin-top: 20px;
            max-width: 100%;
            max-height: 100%;
            display: none; 
            border: 1px solid #ccc;
        }
		
		input[type="file"]::file-selector-button {
            display: inline-block;
        }

        input[type="file"] {
            color: transparent;
        }
        
    </style> 
    <!-- link rel="stylesheet" href="./css/fileUpload.css" -->
    
    <script src="./js/ajax.js"></script>
	<script src="./js/uri.js"></script> 
	<script src="./js/value.js"></script> 
</head>
<body>
    <!-- 新增导航栏 -->
    <nav class="nav-bar">
        <div class="nav-links">
            <a href="#">见闻</a>
            <a href="#">寻才</a>
         <!--  <a href="#">百业</a>    -->  
            <a href="#">百家</a>
        </div> 
        <div class="nav-links">
            <a href="#">语言</a>
            <a href="#" onClick="logout()">退出</a>
            <a href="register.html">注册</a>
        </div>
    </nav> 
  
    <h1>用户中心</h1>
    <div id="user">设置基本信息<label id="email"></label></label></div> 
    
    <div>        
        <label>尊称:</label>
        <input type="text" name="vname" id="vname" value="">
    </div>
    <div>        
        <label>语言:</label>
        <input type="radio" name="lang" value="cn">简体中文</input><br>
        <input type="radio" name="lang" value="en">英文</input> <br>
        <input type="radio" name="lang" value="big5">繁体中文</input>
        <input type="hidden" name="uicon">    
    </div>
    <div>
        <label>尊容:</label> 
        <input type="file" id="uploadInput" onChange="upload()">    
    </div>
    <div id="previewDiv">
        <img id="preview" src="" alt="预览图片"  width="100px" height="100px">
    </div>
    
    <div> 
        <button name="save" onClick="saveInfo()">保存设置</button>
    </div> 
    
    <div id="login">
    </div> 
</body>

<script>   
  	
  	function saveInfo(){
  		debugger;
  		var token = curUser["token"];
  		var user={"email":curUser["email"],
  				"icon":getInputValue("uicon"),
  				"vname":getInputValue("vname"),
  				"lang":getInputValue("lang")
  			};	
  		 
		ajaxPostJson(save_base_uri , token, user , function(status,ret){
				  console.log("Status="+status);
				  console.log("logout Data="+JSON.stringify(ret,null,2)); 
				  if(ret.status==1){ 
					  curUser = ret["data"]; 
					  //alert(JSON.stringify(curUser,null,2)); 
					  localStorage.setItem("cuser", JSON.stringify(curUser));
					  showUserInfo();
				  }else{
					  alert(JSON.stringify(ret,null,2));  
				  }
		});
  	}
  	
	 
  
  function showUserInfo(user = null){
	  if(user == null){
		  user = curUser;
	  }
	  debugger;
	  if(user != null){
		  var div = document.getElementById("preview"); 
		  if(user["icon"] != null){
			  div["src"] = uri_prefix + show_user_img + user["icon"] + "?t=" + new Date().getTime(); 
			  div.style.display = "block"; 
		  } 
		  var email = document.getElementById("email"); 
		  //email.innerText = "<b>["+ curUser["email"]+"]</b>";
		  email.innerHTML = "<b>["+ curUser["email"]+"]</b>";
		  setInputValue("vname",user["vname"]);
		  setInputValue("lang",user["lang"]);
		  setInputValue("uicon",user["icon"]);
	  }else{
		  var div = document.getElementById("login"); 
		  var html = "<br><strong><a href='login.html'>Nlll user!login</a></strong>"; 
		  div.innerHTML = html ;
	  } 
	  console.log("curUser:"+JSON.stringify(user));
  }
  
  function upload(){
  	  debugger; 
  	  if(curUser==null){
  		  alert("Please login first!");
  		  return;
  	  }
  	  const allowedTypes = ["image/jpeg", "image/png"];//, "application/pdf"];
      const maxSize = 5 * 1024 * 1024; // 最大文件大小限制为 5MB
      const file = event.target.files[0];
      
      var user={"email":curUser["email"],
				"icon":curUser["icon"],
				"vname":getInputValue("vname"),
				"lang":getInputValue("lang")
			};	
      
      if (!allowedTypes.includes(file.type)) {
	       alert("不支持的文件类型！");
	       return;
	   }

	   if (file.size > maxSize) {
	       alert("文件大小超出限制！");
	       return;
	   }  
      // 上传文件的服务器地址
      const uploadUrl = uri_prefix + upload_file_user;
      
      uploadFile(uploadUrl,  curUser["token"] , file,  function(status,ret){
    	  if(status == 0){
    		  if(ret.status==1){
    			  user["icon"] = ret["data"];
        		  localStorage.setItem("cuser", JSON.stringify(curUser));
        		  showUserInfo(user); 
    		  }else{
    			  alert("Failed!\r\nMsg:"+ret["desc"]);
    		  } 
    	  }else{
    		  alert("Failed!\r\nMsg:"+ret);
    	  }
      }); 
  }
  
  showUserInfo();
  
</script>
</html>
